@extends('index.layouts.app')

@section('header')
    <link href="{{ asset('/font-awesome/css/font-awesome.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/admin/layui/css/layui.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/master.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/gloable.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/nprogress.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('/css/index/blog.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
            <div class="col-content">
                <div class="inner">
                    <div style="margin-top: 10px">
                        @foreach( $number as $k => $v )
                            <i class="layui-icon layui-icon-read">&nbsp;&nbsp;</i>{{$k}}：{{$v}}<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        @endforeach
                    </div>
                    <article class="article-list bloglist" id="LAY_demo1" >

                    </article>
                </div>
            </div>

            <div class="col-other">
                <div class="inner">
                    <div class="other-item" id="categoryandsearch">
                        <div class="search">
                            <label class="search-wrap">
                                <input type="text" id="keyword" placeholder="输入关键字搜索--暂时不支持" value="{{$request->keyword}}"/>
                                <span class="search-icon" id="searchkey">
                                <i class="fa fa-search"></i>
                            </span>
                            </label>
                            <ul class="search-result"></ul>
                        </div>
                        <ul class="category mt20" id="category">
                            <li data-index="0" class="slider"></li>
                            <li data-index="1"><a href="{{route('news.index')}}">全部文章</a></li>
                            {{--<li data-index="2"><a href="{{route('article_stock.index')}}?category=独家研报">独家研报</a></li>--}}
                        </ul>
                    </div>
                    <!--右边悬浮 平板或手机设备显示-->
                    <div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
                    <div class="article-category">
                        <div class="article-category-title">分类导航</div>
                        <a href="{{route('news.index')}}">全部文章</a>
                        <div class="f-cb"></div>
                    </div>
                    <!--遮罩-->
                    <div class="blog-mask animated layui-hide"></div>
                    <div class="other-item">
                        <h5 class="other-item-title">热门文章</h5>
                        <div class="inner">
                            <ul class="hot-list-article">
                                暂无！
                            </ul>
                        </div>
                    </div>
                    <div class="other-item">
                        <h5 class="other-item-title">置顶推荐</h5>
                        <div class="inner">
                            <ul class="hot-list-article">
                                暂无！
                            </ul>
                        </div>
                    </div>
                    <div class="other-item">
                        <h5 class="other-item-title">最近访客</h5>
                        <div class="inner">
                            <dl class="vistor">
                                暂无
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('scripts')
    <script src="{{ asset('/admin/layui/layui.js') }}"></script>
    <script src="{{ asset('/js/index/gloable.js') }}"></script>
    <script src="{{ asset('/js/index/nprogress.js') }}"></script>
    <script>NProgress.start();</script>
    <script src="{{ asset('/js/index/article.js') }}"></script>
    <script>
        window.onload = function () {
            NProgress.done();
        };

        layui.use('flow', function() {
            var $ = layui.$;
            var flow = layui.flow;
            var last_page = $('#last_page').val();
            flow.load({
                elem: '#LAY_demo1' //流加载容器
                , scrollElem: '' //滚动条所在元素，一般不用填，此处只是演示需要。
                , done: function (page, next) { //执行下一页的回调

                    var lis = [];
                    var keyword = $('#keyword').val();
                    var category = $('#category').val();
                    var get_url = "/news/show?page="+page;
                    if(keyword){
                        get_url = get_url+"&keyword="+keyword;
                    }
                    if(category){
                        get_url = get_url+"&category="+category;
                    }

                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    layui.$.get(get_url, function(res){
                        //假设你的列表返回在data集合中
                        lis.push(res.data.html);

                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.data.last_page);
                    });


                }
            });

            {{--$('#searchkey').click(function () {--}}
                {{--var keyword = $('#keyword').val();--}}
                {{--window.location.href = "{{route('article.search')}}?keyword="+keyword--}}
            {{--})--}}
        });

    </script>
@stop
